<template>
自定义组件-{{sex}}--{{sexValue}}
<m-dict code="sex" :defaultValue="1"/>
<m-dict :defaultValue="1"/>
<m-dict code="sex" :defaultValue="1" @change="handleChange"/>
<m-dict ref="dictRef" code="sex" v-model="sex" v-model:option="sexValue"/>
<button @click="handleClick">操作字典</button>
<m-dict code="sex" :defaultValue="1">
  <template #default="slotProps">
    我是自定义区-{{slotProps.code}}
  </template>
</m-dict>
<m-dict code="sex" :defaultValue="1">
  <template #default="{code,defaultValue}">
    我是自定义区-{{code}}-{{defaultValue}}
  </template>
</m-dict>
<m-dict code="sex" :defaultValue="1">
  <template #default="{code,defaultValue}">
    我是自定义区-{{code}}-{{defaultValue}}
  </template>
  <template #btn="slotProps">
    我自定义按钮区-{{slotProps}}
    <a-button type="primary" shape="circle">
    <template #icon><SearchOutlined />
    </template>
  </a-button>
  </template>
</m-dict>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { SearchOutlined } from '@ant-design/icons-vue'
// import Dict from '/@/components/Dict';
const handleChange = (value: string | number) =>{
  console.log('value:'+value)
}
const sex = ref<Number>(1)
const sexValue = ref<Number>(1)
const dictRef = ref()
const handleClick = () =>{
  console.log(dictRef.value.code)
  console.log(dictRef.value.getOption())
  dictRef.value.setValue(10)
}
</script>
<style lang="less" scoped>

</style>